<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件夹</title>
<!--    <script src="/static/js/jquery-3.4.1.min.js"></script>-->
    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
<form action="/file/upload" enctype="multipart/form-data" method="post">
    <input id="file" type='file' webkitdirectory >
    <button id="upload-btn" type="button">upload</button>
</form>
</body>

<script>
    $(function () {
        var files = [];
        // 操作dom获取input的数据，多个input的话，用id获取
        $(document).ready(function(){
            $("#file").change(function(){
                files = this.files;
            });
        });


        // 绑定点击事件，ajax请求
        $("#upload-btn").click(function () {
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                // "file"是后台接口的参数名
                formData.append("file", files[i]);
            }
            $.ajax({
                url : "http://127.0.0.1:80/file/uploads",
                type : 'POST',
                data : formData,
                contentType : false,
                processData : false,
                cache : false,
                success : function(data) {


                    console.log("文件夹上传后返回的data = ",data)

                    console.log("成功!");
                }
            });
        })
    })
</script>
</html>